<!-- 模板表单预览 -->
<template>
  <a-modal
    v-model:visible="modalVisible"
    width="80%"
    :hide-cancel="true"
    ok-text="关闭"
    :body-style="{
      padding: '20px 100px 20px 20px'
    }"
  >
    <template #title> {{ formData.data.name }} </template>
    <div class="container">
      <div v-if="scroll" class="anchor">
        <div
          class="anchor-total"
          v-for="item in formData.data.details"
          :href="`#${item.id}`"
          :key="item.id"
          @click="handleAnchor(item.id)"
          :class="{ active: item.id === currId }"
          :ref="(e, ind) => setAnchorRefs(e, item.id)"
        >
          <div class="anchor-total-box">
            <div class="anchor-total-box-item">
              {{ item.cnName }}
            </div>
            <div
              class="anchor-total-box-circle"
              :class="{ activeCircle: item.id === currId }"
            ></div>
          </div>
        </div>
      </div>
      <div
        style="height: calc(100vh - 216px); overflow: auto; padding: 0 10px 0 0"
        id="scrollBar"
      >
        <div v-for="item in formData.data.details" :key="item.id" :id="item.id">
          <div :id="item.collectionId">
            <div class="title-box">
              <div class="title">
                <div
                  :style="{
                    marginLeft: '25px'
                  }"
                >
                  {{ item.cnName }}
                </div>
              </div>
            </div>
            <a-form ref="HumanForm" :model="item.controlModel" autoLabelWidth>
              <a-row :gutter="16">
                <a-col
                  v-for="(ele, index) in item.controlModel"
                  :key="index"
                  :span="(ele?.span as number)"
                >
                  <FormItem
                    :disabled="true"
                    :componentType="(ele?.ctlComponentType as string)"
                    :props="(ele?.props as any)"
                    :name="(ele?.ctlCnName as string)"
                    :required="(ele?.required as any)"
                    v-model:values="ele.controlValue"
                    :code="(ele?.ctlCode as any)"
                    :data="ele"
                  />
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import FormItem from '@/components/DynamicFormsNew/RenderingForm/FormItem/index.vue';
import useControlFormStore from '@/store/controlForm';
const controlFormStore = useControlFormStore();
controlFormStore.fieldNames.componentType = 'ctlComponentType';
controlFormStore.fieldNames.labelName = 'ctlCnName';
const props = withDefaults(
  defineProps<{
    data: {
      name: string; // 模板名称
      details: Array<any>; // 模板详情
    }; // 控件子集数据
    visible: boolean; // 是否显示弹出框
    sliceName?: string; // 切片名称
  }>(),
  {}
);
const emits = defineEmits(['update:visible']);

const modalVisible = computed({
  get() {
    return props.visible;
  },
  set(visible: boolean) {
    emits('update:visible', visible);
  }
});

const formData: any = reactive({
  data: {
    name: '',
    details: []
  }
});

let scroll = ref(); // 定义一个scroll储存scrollbar的Dom用来锚点跳转

let currId = ref(-1); // 当前选中锚点的id

const eleAnchorRefs = ref([]); // 储存锚点的refs

// 动态设置锚点的refs
const setAnchorRefs = (e, ind) => {
  eleAnchorRefs.value[ind] = e;
};
// 处理锚点数据
const handleAnchor = (id: number) => {
  currId.value = id;
  eleAnchorRefs.value[id]?.scrollIntoView({
    behavior: 'smooth'
  });
  let targetElement = document.getElementById(`${id}`);
  let targetOffset = targetElement?.offsetTop;
  // 获取包含目标元素的父级 div
  let parentDiv = document.getElementById('scrollBar'); // 将 'your-parent-div-id' 替换为实际的父级 div 的 id
  // 平滑滚动到目标位置
  parentDiv.scrollTo({
    top: targetOffset,
    behavior: 'smooth'
  });
};

// onMounted(() => {
//   scroll.value = document.getElementById('scrollBar');
// });

watch(
  () => modalVisible.value,
  (newVal: boolean) => {
    if (newVal) {
      formData.data = props.data;
      scroll.value = document.getElementById('scrollBar');
      currId.value = formData.data.details[0]?.id;
      console.log(formData.data);
    }
  }
);
</script>

<style scoped lang="less">
.container {
  display: flex;

  .anchor {
    margin-right: 30px;
    display: flex;
    flex-direction: column;
    &-total {
      display: inline-block;
      text-decoration: none;
      color: #000;
      height: 36px;
      line-height: 36px;
      z-index: 9;
      &:last-child .anchor-total-box-circle::after {
        content: none; /* 移除连线样式 */
      }
      &-box {
        width: 120px;
        position: relative;
        display: flex;
        justify-content: end;
        align-items: center;

        &:active,
        &:hover {
          background-color: #edeffd;
        }

        &-item {
          position: relative;
          right: 20px;
          font-weight: 700;
          text-align: right;
        }
        &-circle {
          position: absolute;
          right: 0;
          width: 10px;
          height: 10px;
          box-shadow: 0 0 0 4px #edeffd;
          border-radius: 50%;
          background-color: #ccc;

          &::after {
            position: absolute;
            content: '';
            width: 2px; /* 线条的宽度 */
            height: calc(20px); /* 线条的高度 */
            background-color: #ccc; /* 线条的颜色 */
            bottom: -24px; /* 将线条放置在圆形下面 */
            left: 50%; /* 将线条水平居中 */
            transform: translateX(-1px); /* 修正水平居中的偏移 */
          }
        }
      }
    }
  }
  .title-box {
    position: relative;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 36px;
      border-radius: 4px;
      font-weight: 700;
      margin-bottom: 10px;
      background: #edeffd;
    }
  }

  .title-box::before {
    position: absolute;
    // top: 33px;
    left: 10px;
    display: inline-block;
    height: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    margin-right: 20px;
    border-radius: 2px;
    // transform: translateY(-50%);
    content: '';
    background-color: #165dff;
  }
}
:deep(.arco-anchor-link-active) {
  background-color: #edeffd;
}

.active {
  color: #165dff !important;
}

.activeCircle {
  background-color: #165dff !important;
}
</style>
